<template>
	<view class="container">
		
		<u-sticky offset-top="0" bgColor="#fff">
			<u-tabs :list="types" :current="type" @change="change"></u-tabs>
		</u-sticky>
		
		
		<view class="sq-panel" v-for="seckill in seckills" :key="seckill.id" @click="seckillClk(seckill)">
			<view class="panel-tip">
				{{seckill.name}}
			</view>
			<view>
				<view>开始时间:{{formatDateTime(seckill.startTime)}}</view>
				<view>结束时间:{{formatDateTime(seckill.endTime)}}</view>
				<view>状态:{{seckillStatus(seckill)}}</view>
			</view>
		</view>
		
		<uni-load-more :status="status" />

		<view class="seckill-add">
			<u-button type="success" @click="addSeckill" text="添加秒杀活动"></u-button>
		</view>

		<uni-popup ref="popup" type="center" :isMaskClick="false">
			<view class="form-area">
				<uni-forms ref="form" :modelValue="formData">
					<uni-forms-item label="名称" name="name" required>
						<uni-easyinput v-model="formData.name" placeholder="活动名称" />
					</uni-forms-item>
					<uni-forms-item label="时间" name="timeRange" required >
						<uni-datetime-picker type="datetimerange" :clear-icon="true" v-model="formData.timeRange"
							@change="dateChange" />
					</uni-forms-item>
				</uni-forms>
				<view style="display: flex;">
					<u-button text="取消" @click="cancel"></u-button>
				<u-button text="确定" @click="submitForm" type="success"></u-button>
				</view>
				
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getShopSeckills,
		addShopSeckill,
		beginSeckill
	} from '@/api/shops/seckillManage/seckillManage.js'
	import {
		transform
	} from '@/minix/mixin.js'
	import {
		throttle
	} from '@/utils/reqUtil.js'
	export default {
		mixins: [transform],
		data() {
			return {
				seckills: [],
				types:[{name:'准备中'},{name:'进行中'},{name:'已结束'}],
				shopId: '',
				status: 'more',
				current: 1,
				totalPage: 0,
				type:0,
				formData: {
					name: '',
					timeRange: []
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称必填'
						}]
					},
					timeRange: {
						rules: [{
							required: true,
							errorMessage: '时间必填'
						}]
					}
				},

			}
		},
		onLoad(options) {
			this.shopId = options.shopId
			this.init()
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onReachBottom() {
			if (this.status === 'noMore') {
				return
			}
			throttle(() => {
				this.current++
				this.getShopSeckill()
			})()
		},
		methods: {
			init() {
				this.getShopSeckill()
			},
			getShopSeckill() {
				this.status = 'loading'
				getShopSeckills({
					current: this.current || 1,
					type: this.type || 0
				}).then((res) => {
					if (this.current == 1) {
						this.totalPage = res.totalPage
					}
					if (this.totalPage <= this.current) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
					if (res.list.length > 0) {
						this.seckills.push(...res.list)
					}
				}).catch((res) => {
					this.status = 'noMore'
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			change(r) {
				this.type = r.index
				this.seckills= []
				this.getShopSeckill()
			},
			seckillStatus(seckill) {
				const now = new Date().getTime()
				if (seckill.startTime > now) {
					return '未开始';
				} else if (seckill.endTime > now) {
					return '进行中';
				} else {
					return '已结束'
				}
			},
			addSeckill() {
				this.$refs.popup.open()
			},
			submitForm() {
				let _this = this
				this.$refs.form.validate().then((res) => {
					let data = {
						name:res.name,
						startTime:res.timeRange[0],
						endTime: res.timeRange[1]
					}
					addShopSeckill(data).then((r)=> {
						data.id = r;
						data.startTime = new Date(data.startTime).getTime()
						data.endTime = new Date(data.endTime).getTime()
						_this.seckills.unshift(data)
						_this.cancel()
					})
				})
			},
			cancel(){
				this.$refs.popup.close()
			},
			seckillClk(seckill) {
				let _this = this
				uni.showActionSheet({
					itemList:["添加秒杀商品","开启活动"],
					success: (res) => {
						if(res.tapIndex == 0) {
							uni.navigateTo({
								url:'/subpkg/shops/seckillGoods/seckillGoods?seckillId=' + seckill.id
							})
						} else if(res.tapIndex == 1) {
							if(seckill.status != 0) {
								return uni.showToast({
									title:'活动不在准备中,不能开始'
								})
							}
							uni.showModal({
								title:'活动开启后，将不能再修改',
								success: (r) => {
									if(r.confirm) {
										beginSeckill(seckill.id).then((result) => {
											seckill.status = 1
										})
										uni.showToast({
											title:'活动开启成功'
										})
									}
								}
							})
						}
					}
				})
				
				
				
			}
		}
	}
</script>

<style lang="scss">
	.seckill-add {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
	}

	.form-area {
		background-color: #fff;
		border-radius: 5px;
		border: 1px solid #cfcfcf;
		width: 85vw;
		padding: 10px;
	}
</style>